import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { RootState } from '@/store'
import {
  addChannelAPI,
  changeChannelIdAPI,
  deleteChannelAPI,
  getAllChannelAPI,
  getUserChannelAPI,
} from '@/store/action/channel'
import { Popup, Tabs } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import lodash from 'lodash'
import classNames from 'classnames'
import { Channels } from '@/store/reducer/channel'
import history from '@/utils/history'

export default function Channel() {
  const dispatch = useDispatch()
  //   组件挂载时
  useEffect(() => {
    // 获取用户频道
    dispatch(getUserChannelAPI())
    // 获取所有频道
    dispatch(getAllChannelAPI())
  }, [dispatch])
  //  获取rudex数据
  const { list, AllList } = useSelector((state: RootState) => state.channel)

  // // 推荐频道列表 = 所有频道 - 用户频道
  // const leftList = AllList.filter((item) => {
  //   // 查找我的频道是否出现过
  //   const obj = list.find((v) => item.id === v.id)
  //   // 出现过就返回false , 表示过滤掉
  //   return obj ? false : true
  // })

  // 利用 ladash 根据 id 计算推荐频道列表
  const leftList = lodash.differenceBy(AllList, list, 'id')
  // console.log(leftList)

  // 弹出层显示与隐藏
  const [popupShow, setPopupShow] = useState(false)

  // 当前选中的频道 id，默认值是推荐频道 id 为 0
  // const [active, setActive] = useState(0)
  const { activeId } = useSelector((state: RootState) => state.channel)

  // 频道是否可编辑
  const [editable, seteditable] = useState(false)
  // 添加频道
  const handleAdd = (item: Channels) => {
    dispatch(addChannelAPI(item))
  }
  return (
    <div>
      {/* 顶部频道 tabs */}
      <div className={styles.root}>
        <Tabs
          className="tabs"
          activeKey={String(activeId)}
          onChange={(key: string) => dispatch(changeChannelIdAPI(Number(key)))}
        >
          {/*  💥 5.0.0-beta.22版本都变了用 Tabs.Tab */}
          {/* 以前写法 */}
          {/* <Tabs.TabPane title="水果" key="fruits" /> */}
          {list.map((item) => (
            <Tabs.Tab title={item.name} key={item.id} />
          ))}
        </Tabs>
        <div className="right">
          <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
          <Icon type="iconbtn_channel" onClick={() => setPopupShow(true)} />
        </div>
      </div>

      {/* 编辑弹出层 */}
      <Popup
        visible={popupShow}
        position="left"
        bodyClassName={styles.channelPopup}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setPopupShow(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className={classNames('channel-item', editable ? 'edit' : '')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击进入频道</span>
              <span
                className="channel-item-edit"
                onClick={() => seteditable(!editable)}
              >
                {editable ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {list.map((item) => (
                <span
                  key={item.id}
                  className={classNames(
                    'channel-list-item',
                    item.id === activeId ? 'actived' : ''
                  )}
                  onClick={() => {
                    // 设置频道 id 高亮效果
                    dispatch(changeChannelIdAPI(item.id))
                    // 关闭弹窗
                    setPopupShow(false)
                  }}
                >
                  {item.name}
                  <Icon
                    onClick={(
                      e: React.MouseEvent<HTMLOrSVGElement, MouseEvent>
                    ) => {
                      e.stopPropagation()
                      dispatch(deleteChannelAPI(item.id))
                    }}
                    type="iconbtn_tag_close"
                  />
                </span>
              ))}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击进入频道</span>
            </div>
            <div className="channel-list">
              {leftList.map((item) => (
                <span
                  key={item.id}
                  className="channel-list-item"
                  onClick={() => handleAdd(item)}
                >
                  +{item.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  )
}
